<template>
  <div class="meeting-record">
    <van-nav-bar
      title="会议记录"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-tabs v-model:active="active" animated swipeable sticky :title-active-color="'#456bfb'">
      <van-tab title="我发起的会议">
        <van-pull-refresh
          v-model="initiatedLoading"
          success-text="刷新成功！"
          class="refresh"
          @refresh="initiatedOnRefresh"
        >
          <van-empty
            v-if="initiatedMeetingRecordList.length === 0"
            image-size="10rem"
            description="列表空空如也"
          />
          <div v-else>
            <div
              class="record-item"
              v-waves
              v-for="item in initiatedMeetingRecordList"
              :key="item.id"
              @click="goMeetingDetail(item.id)"
            >
              <div class="content">
                <div class="meeting-name">
                  <span class="label">主题</span>
                  <span class="value">{{ item.name }}</span>                 
                </div>  
                <div class="meeting-time">
                  <span class="label">时间</span>
                  <span class="value">{{judgeIsSameDay(item.startTime, item.endTime, 0)}} {{ fromatDateTime(item.startTime) }} {{judgeIsSameDay(item.startTime, item.endTime, 1)}} {{ fromatDateTime(item.endTime) }}</span>                
                </div>
                <div class="meeting-room">
                  <span class="label">{{ item.roomNumber ? '房间号' : '会议类型'}}</span>
                  <span class="value">{{ item.roomNumber ? item.roomNumber : "线上会议" }}</span>
                </div>
              </div>
              <div class="operation" >
                <van-icon name="arrow" size="1em" />
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="我参与的会议">
        <van-pull-refresh
          class="refresh"
          v-model="joinLoading"
          success-text="刷新成功！"
          @refresh="joinOnRefresh"
        >
          <van-empty
            v-if="joinMeetingRecordLsit.length === 0"
            image-size="10rem"
            description="列表空空如也"
          />
          <div v-else>
            <div
              class="record-item join-item"
              v-waves
              v-for="item in joinMeetingRecordLsit"
              :key="item.id"
              style="height: 5rem"
            >
               <div class="content">
                <div class="meeting-name">
                  <span class="label">主题</span>
                  <span class="value">{{ item.name }}</span>                 
                </div>  
                <div class="meeting-person">
                  <span class="label">发起人</span>
                  <span class="value">{{ item.userName }}</span>                 
                </div>  
                <div class="meeting-room">
                  <span class="label">{{ item.roomNumber ? '房间号' : '会议类型'}}</span>
                  <span class="value">{{ item.roomNumber ? item.roomNumber : "线上会议" }}</span>
                </div>
                <div class="meeting-time">
                  <span class="label">时间</span>
                  <span class="value">{{judgeIsSameDay(item.startTime, item.endTime, 0)}} {{ fromatDateTime(item.startTime) }} {{judgeIsSameDay(item.startTime, item.endTime, 1)}} {{ fromatDateTime(item.endTime) }}</span>                
                </div>
                
              </div>
              <div class="operation joinoperation">
                <span v-if="item.isLeave">{{ item.isLeave ? "已请假" : ""  }}</span>
                <span v-if="!item.isLeave">{{ signInStatus[item.signInStatus] }}</span>
                <span v-if="!item.isLeave">{{ signOutStatus[item.signOutStatus] }}</span>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { signInStatus, signOutStatus } from '@/enum.js'
import {
  getUserInitiatedMeetingList,
  getUserJoinMeetingList,
} from '@/api/home/home.js'
import { fromatDateTime, judgeIsSameDay } from "@/utils/formatDate.js"
import { clearTimer } from "@/utils/util.js"
export default {
  name: 'MeetingRecord',
  setup() {
    const store = useStore()
    const router = useRouter()
    // 返回处理函数
    const onClickLeft = () => history.back()

    // top 栏选中状态
    const active = ref(0)

    const number = computed(() => store.getters.getUserNumber)
    const wavesTime = computed(() => store.getters.getWavesTime)

    let timer = null

    onMounted(() => {
      getUserInitiatedMeeting()
      getUserJoinMeeting()
    })

    /**
     * 发起会议部分
     */

    // 我发起的会议记录
    const initiatedMeetingRecordList = ref([])

    // 我发起的会议记录刷新加载状态
    let initiatedLoading = ref(false)

    // 获取用户开会会议列表
    async function getUserInitiatedMeeting() {
      const res = await getUserInitiatedMeetingList({
        userNumber: number.value,
        status: 2,
      })
      // 关闭刷新
      initiatedLoading.value = false
      console.log(res.data)
      initiatedMeetingRecordList.value = res.data.data
    }

    // 我发起的会议记录刷新处理函数
    function initiatedOnRefresh() {
      getUserInitiatedMeeting()
    }

    /**
     * 参会记录部分
     */

    // 我参加的会议记录
    const joinMeetingRecordLsit = ref([])

    // 我参与的会议记录刷新加载状态
    let joinLoading = ref(false)

    // 获取用户参会会议列表
    async function getUserJoinMeeting() {
      const res = await getUserJoinMeetingList({
        userNumber: number.value,
        status: 2,
      })
      console.log(res.data, "getUserJoinMeeting")
      joinLoading.value = false
      joinMeetingRecordLsit.value = res.data.data
    }

    // 我发起的会议记录刷新处理函数
    function joinOnRefresh() {
      getUserJoinMeeting()
    }

    // 前往会议详情处理函数
    function goMeetingDetail(id) {
      console.log(id)
      timer = setTimeout(() => {
        router.push({
          path: '/meetingrecorddetail',
          query: {
            id: id,
          },
        })
      }, wavesTime.value)
      
    }

    onUnmounted(() => {
      clearTimer(timer)
    })

    return {
      active,
      initiatedMeetingRecordList,
      joinMeetingRecordLsit,
      signInStatus,
      signOutStatus,
      initiatedLoading,
      joinLoading,
      onClickLeft,
      goMeetingDetail,
      initiatedOnRefresh,
      joinOnRefresh,
      fromatDateTime,
      judgeIsSameDay
    }
  },
}
</script>

<style lang="scss" scoped>
.meeting-record {
  background-color: var(--background_color);
  width: 100%;
  height: 100vh;
  

  .van-tabs {
    // width: 100%;
    // height: calc(100vh - var(--van-nav-bar-height));

    .refresh {
      width: 100%;
      overflow: auto;
      height: calc(100vh - 50px - var(--van-nav-bar-height));
      // height: 100vh;
      box-sizing: border-box;
      padding: 0 1rem 1rem 1rem;

      &::-webkit-scrollbar {
        display: none;
      }
      

      .record-item {
        width: 100%;
        height: 9rem;
        background-color: var(--item_background_color);
        margin-top: 0.6rem;
        box-sizing: border-box;
        padding: 1rem 1.5rem;
        display: flex;
        border-radius: 1rem;
        box-shadow: var(--box-shadow);

        // &:active {
        //   background-color: var(--active-background-color);
        //   transition: var(--active-transition);
        // }

        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          flex: 1;
          height: 100%;
          font-size: 1.3rem;

          .label {
            color: var(--second-text-color);
            font-size: var(--second-text-size);
            margin-right: 0.5rem;
            width: 6rem;
            display: inline-block;
            font-weight: var(--second-text-weight);
          }
          .value {
            font-size: var(--second-text-size);
            font-weight: var(--second-text-weight);
          }

          .meeting-name {
            .value {
              font-size: var(--primary-text-size);
              font-weight: var(--primary-text-weight);
            }
          }
          .meeting-time {
            .value {
              // width: 20rem;
              // display: inline-block;
              // // background-color: red;
              // overflow: hidden;
              // text-overflow: ellipsis;             
              // white-space: nowrap;
            }
          }
        }

        .operation {
          width: 2rem;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: right;
          justify-content: center;

          span {
            margin-right: 0.5rem;
            color: #666;
            margin-bottom: 1.5rem;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        .joinoperation {
          width: 4.2rem;
        }
      }

      .join-item {
        height: 12rem !important;
      }
    }
  }

 
  
  
}
</style>